<template>
    <el-dialog
        v-model="componentDeleteDialogVisible"
        title="删除组件"
        width="20%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        是否确定删除？
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {componentInfoDelete, componentInfoQueryNoContent} from "@/request/components";
import {ElNotification} from "element-plus";

export default {
    name: "ComponentDeleteDialog",
    props: ['componentForm'],
    data() {
        return {
            saveLoading: false
        }
    },
    computed: {
        componentDeleteDialogVisible() {
            return this.$store.state.componentDeleteDialogVisible;
        },
        componentSearchData() {
            return this.$store.state.componentSearchData;
        }
    },
    methods: {
        cancelDialog() {
            this.$store.state.componentDeleteDialogVisible = false;
        },
        submitDialog() {
            this.saveLoading = true
            componentInfoDelete(this.componentForm).then(res => {
                ElNotification({
                    title: 'Success',
                    message: res.message,
                    type: 'success'
                });
                componentInfoQueryNoContent(this.componentSearchData).then(res => {
                    this.$store.state.componentDataList = res.data;
                })
                this.$store.state.componentDeleteDialogVisible = false;
                this.saveLoading = false
            }).catch(res => {
                this.saveLoading = false
            })
        }
    }
}
</script>

<style scoped lang="less">

</style>